<template>
	<view class="content">
		<view v-if="isLoading" class="loadingico" :style="{height: windowHeight + 'px'}">
			<image style="width:50px;height: 50px;" src="../../static/images/loading.gif"></image>
		</view>
		<view v-else>
			<view class="Box mask_mask">
			    <helang-blur :params="params"></helang-blur>
				<image class="img mask_mask" :src="'https://www.yedushu.cn/' + baginfo.books.bimg_m"></image>
			</view>
			<view class="infobox">
				<text class="bookname">{{baginfo.books.book_name}}</text>
				<text v-if="baginfo.books.yuanzuoming != null && baginfo.books.yuanzuoming != ''" class="yuanzuoming">{{baginfo.books.yuanzuoming}}</text>
				<view class="text">
					<text v-if="baginfo.otype == 'S'" class="nowpric">￥{{baginfo.nowprice}}</text>
					<text v-if="baginfo.otype == 'J'" class="nowpric1">借阅</text>
					<text v-if="baginfo.otype == 'E'" class="nowpric1">交换</text>
					<text v-if="baginfo.otype == 'Z'" class="nowpric1">赠送</text>
				</view>
				<view class="text">					
					<text class="fontcolor">原价：</text><text class="fonttext">￥{{baginfo.books.dingjia}}</text>
				</view>
				<view class="text">					
					<text class="fontcolor">品相：</text>
					<text v-if="baginfo.condition == 0" class="fonttext">较旧</text>
					<text v-if="baginfo.condition == 5" class="fonttext">5成新</text>
					<text v-if="baginfo.condition == 6" class="fonttext">6成新</text>
					<text v-if="baginfo.condition == 7" class="fonttext">7成新</text>
					<text v-if="baginfo.condition == 8" class="fonttext">8成新</text>
					<text v-if="baginfo.condition == 9" class="fonttext">9成新</text>
					<text v-if="baginfo.condition == 10" class="fonttext">全新</text>
				</view>
				<view class="text">					
					<text class="fontcolor">加入：</text><text class="fonttext">{{addtime}}</text>
				</view>
				<view v-if="baginfo.beizhu != ''" class="beizhu">
					备注：{{baginfo.beizhu}}
				</view>
			</view>			
			<view class="bookinfo">
				<navigator class="" :url="'./bookinfo?bookid=' + baginfo.books.book_id">
				<view class="binfo">
					<text>了解书籍的详细介绍</text>					
					<image class="arrow" src="../../static/images/ic_diary_forward.png"></image>
				</view>
				</navigator>
			</view>
			<view class="tab_bottom">
				<view class="item">
					<navigator :url="'../userhome/userhome?uid=' + baginfo.users.uid + '&username=' + baginfo.users.user_name" class="home">
						<view class="user">
							<!-- <image class="face" src="../../static/mainpic/ic_nav_my_pressed.png"></image> -->
							<image v-if="face == null && face != ''" class="face" src="https://www.yedushu.cn/usersface/default/avatar-min.png"></image>
							<image v-else class="face" :src="'https://www.yedushu.cn/' + face"></image>
							<text class="uname">{{baginfo.users.user_name}}</text>
						</view>
					</navigator>
					<view class="fengge"></view>
					<view class="">
						<image class="cart" src="../../static/images/guide_cart_nm.png"></image>
					</view>
				</view>
				<view class="addcart" @click="addCart()">
					<text class="cartxt">发纸条</text>
				</view>
			</view>
		</view>		
	</view>
</template>

<script>
	import helangBlur from "@/components/helang-blur/helang-blur.vue";
	import formatDate from '../../components/formatDate/formatDate.js';
	export default {
		components:{
			helangBlur
		},
		data() {
			return {
				params:{
					width:'100%',
					height:'310px',
					image: '',
					blur:"xl"
				},				
				baginfo: [],
				face: '',
				addtime: '', // 书籍添加时间
				isLoading: false,
				windowHeight: '',
			}
		},
		// 发送给朋友
		onShareAppMessage(res) {
			//if (res.from === 'button') {
			// // 来自页面内分享按钮
			// 	console.log(res.target)
			//}
			// J借阅，E交换，S出售，Z赠送，B以上均可
			if(this.baginfo.otype == 'J')
			{
				var zhuangtai = '出借';
			}
			if(this.baginfo.otype == 'E')
			{
				var zhuangtai = '交换';
			}
			if(this.baginfo.otype == 'S')
			{
				var zhuangtai = '出售';
			}
			if(this.baginfo.otype == 'Z')
			{
				var zhuangtai = '赠送';
			}
			return {
				// title: '书友『' + this.baginfo.users.user_name + '』正在' + zhuangtai + '《' + this.baginfo.books.book_name + '》这本书!',
				title: '书友『' + this.baginfo.users.user_name + '』正在' + zhuangtai + '这本书!',
				path: '/pages/books/yuelininfo?bagid=' + this.baginfo.id
			}
		},
		// 分享到朋友圈
		onShareTimeline(res) {
			// J借阅，E交换，S出售，Z赠送，B以上均可
			if(this.baginfo.otype == 'J')
			{
				var zhuangtai = '出借';
			}
			if(this.baginfo.otype == 'E')
			{
				var zhuangtai = '交换';
			}
			if(this.baginfo.otype == 'S')
			{
				var zhuangtai = '出售';
			}
			if(this.baginfo.otype == 'Z')
			{
				var zhuangtai = '赠送';
			}
			return {
				title: '夜读书的书友『' + this.baginfo.users.user_name + '』正在' + zhuangtai + '《' + this.baginfo.books.book_name + '》这本书!',
				imageUrl: "https://www.yedushu.cn/" + this.baginfo.books.bimg_m
			}
		},
		onLoad: function(option) {
			this.isLoading = true;
			// console.log(option.bagid);
			// 获得对应的书包里的书籍信息的数据
			this.getYuelinInfo(option.bagid);
			uni.setNavigationBarTitle({
			    title: '夜读书'
			});
			
			// 获得设备
			var _this = this;
			uni.getSystemInfo({
			    success: function (res) {
			        // console.log(res.model);
					_this.windowHeight = res.windowHeight;
			    }
			});
		},
		methods: {
			getYuelinInfo(bagid) {
				uni.request({
				    url: 'https://www.yedushu.cn/api/shopinfo/'+ bagid, //书籍信息
				    success: (res) => {
				        // console.log(JSON.stringify(res.data));
						this.params.image = 'https://www.yedushu.cn/' + res.data.books.bimg_m;						
						this.baginfo = res.data;	
						this.face = res.data.users.avatar_file_min;
						this.addtime = formatDate(res.data.add_time);
						this.isLoading = false;
				    }
				});				
			},
			addCart() {
				// uni.showToast({
				//     title: '功能暂时没有开放',
				// 	icon: 'none',
				//     duration: 2000
				// });
				// 判断是否登录
				const haslogin = uni.getStorageSync('haslogin');
				if(!haslogin) {
					uni.showModal({
					    title: '提示',
					    content: '登录后可以查看书友的联系方式',
						confirmText: '去登录',
					    success: function (res) {
					        if (res.confirm) {
					            // console.log('用户点击确定');
								// 跳转到登录页面
								uni.navigateTo({
								    url: '../login/login'
								});
					        } else if (res.cancel) {
					            // console.log('用户点击取消');
					        }
					    }
					});
					return;
				}
				var mobile = this.baginfo.users.mobile;
				uni.showModal({
				    title: '提示',
				    content: '卖家联系电话：' + mobile,
					confirmText: '联系卖家',
				    success: function (res) {
				        if (res.confirm) {
				            // console.log('用户点击确定');
							// 设置系统剪贴板的内容
							// uni.setClipboardData({
							//     data: mobile,
							//     success: function () {
							//         // console.log('success');
							// 		uni.showToast({
							// 		    title: '电话号码拷贝成功',
							// 			icon: 'none',
							// 		    duration: 2000
							// 		});
							//     }
							// });
							uni.makePhoneCall({
							    phoneNumber: mobile // 拨打电话号码
							});
				        } else if (res.cancel) {
				            // console.log('用户点击取消');
				        }
				    }
				});
			}
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
	}
	.loadingico {
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.Box{
	    width: 100%;
	    height: 100%;
	    position: relative;
	    overflow: hidden;
	}
	.mask_mask {
		/*遮罩*/
	    width: 100%;
	    height: 300px;
	    z-index: 1;
	}
	.img {				
		position:absolute;	
		width: 170px;
		height: 240px;
		border-radius: 3px;
		margin: auto;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		z-index: 2;
	}
	.infobox {
		padding: 10px 10px;
		display: flex;
		flex-direction: column;
	}
	.infobox .bookname {
		padding-top: 5px;	
		font-size: 20px;
	}
	.infobox .yuanzuoming {
		padding-top: 4px;
		font-size: 15px;
	}
	.infobox .text {
		padding-bottom: 6px;
	}
	.infobox .fontcolor {
		font-size: 16px;
		color: #999999;
	}
	.infobox .fonttext {
		font-size: 16px;
	}
	.infobox .nowpric {
		font-size: 20px;
		color: #ff6633;
	}
	.infobox .nowpric1 {
		font-size: 16px;
		color: #ff6633;
	}
	.infobox .beizhu {
		background-color: #fafafa;
		padding: 10px 10px;
		border-radius: 5px;
		font-size: 16px;
	}
	.bookinfo {
		padding: 10px 10px;
	}
	.bookinfo .binfo {		
		display: flex;
		flex-direction: row;
		justify-content: space-between;		
		background-color: #fafafa;		
		border-radius: 5px;
		padding: 10px 10px;
		font-size: 16px;
		align-items: center;
	}
	.bookinfo .arrow {
		width: 15px;
		height: 15px;
	}
	.tab_bottom {
		width: 100%;
		position: fixed;
		left: 0;
		bottom: 0;
		padding-bottom: env(safe-area-inset-bottom);
		border-top: 1rpx solid #e6e6e6;
		height: 120rpx;
		background-color: #FFFFFF;
		z-index: 10;
		display: flex;
		align-items: center;
		justify-content:space-between;
	}
	.tab_bottom .item {
		display: flex;
		flex: 1;
		flex-direction: row;
		align-items: center;
		justify-content:center;
		padding: 0 25px;		
		justify-content: space-between; 
	}
	.tab_bottom .user {
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.tab_bottom .user .uname {
		font-size: 8px;
		max-width: 60px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.tab_bottom .face {
		width: 30px;
		height: 30px;
		/* margin-left: 10px; */
		border-radius: 50%;
	}
	.tab_bottom .fengge {
		width: 1px;
		height: 60rpx;
		background-color: #f2f2f2;
	}
	.tab_bottom .cart {
		width: 30px;
		height: 30px;
	}
	.tab_bottom .addcart {
		display: flex;
		flex: 1;
		justify-content: center;
		margin-right: 15px;
		background-color: #f28281;
		padding: 10px 30px;
		border-radius: 20px;
		/* width: 40%; */
	}
	.tab_bottom .addcart .cartxt {
		font-size: 15px;
		color: #FFFFFF;
	}
</style>
